<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">班级管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目分组</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 班级的列表 -->
    <el-row :gutter="10">
      <!--    班级列表操作按钮    -->
      <el-col :span="8">
        <el-card class="box-card">
          <div class="grid-content bg-purple">班级列表
            <div style="float: right ">
              <el-button type="primary" @click="loadMyClassList()">我的班级</el-button>
              <el-button type="primary" @click="loadClassList()">所有班级</el-button>
            </div>
          </div><br><br>
          <!--  班级列表-->
          <template>
            <el-table :data="classData"
                      highlight-current-row
                      @current-change="loadTeamList"
                      style="width: 100%" size="small">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="className" label="班级" align="center"></el-table-column>
              <el-table-column prop="teacherName" label="指导老师" align="center"></el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div class="grid-content bg-purple-light">小组列表
            <div style="float: right">
              <el-button type="primary" @click="openAddNewTeam()">添加小组</el-button>
              <el-button type="primary" @click="openUpdateTeam()">修改小组</el-button>
            </div>
          </div><br><br>
          <!--  分组列表-->
          <template>
            <el-table :data="teamData"
                      highlight-current-row
                      @current-change="loadStudentListByTeam"
                      style="width: 100%" size="small">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="teamName" label="组别" align="center"></el-table-column>
              <el-table-column prop="supervisorName" label="组长" align="center"></el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div class="grid-content bg-purple">组员列表
            <div style="float: right">
              <el-button type="primary" @click="openAddNewTeamStudent()">添加组员</el-button>
              <el-button type="primary" @click="openAddNewSearchTeamStudent()">添加额外组员</el-button>
            </div>
          </div><br><br>
          <!--  分组列表-->
          <template>
            <el-table :data="teamStudentData"
                      style="width: 100%" size="small">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="nickname" label="组员" align="center"></el-table-column>
              <el-table-column prop="teamName" label="操作" align="center"></el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹出的添加/修改分组的对话框 -->
    <el-dialog :title="handle" :visible.sync="handleTeam">
      <el-form :model="teamForm">
        <el-form-item label="小组名称" >
          <el-input v-model="teamForm.teamName"></el-input>
        </el-form-item>
        <el-form-item label="选择组长" prop="supervisors" >
          <el-select v-model="supervisor" value-key="id" placeholder="请选择">
            <el-option
                v-for="item in supervisors"
                :key="item.id"
                :label="item.nickname"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTeam = false">取 消</el-button>
        <el-button type="primary" @click="teamHandle()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹出的添加组员的对话框 -->
    <el-dialog :title="handle" :visible.sync="addNewTeamStudent" style="width: 1250px;margin: auto auto">
      <div>
        <el-transfer v-model="addTeamStudents"
                     :props="{
                      key: 'id',
                      label: 'nickname'
                   }"
                     :titles="['未分组', '预分组']"
                     :data="unTeamStudentData"></el-transfer>
      </div>
      <div slot="footer" class="dialog-footer" style="margin: auto auto">
        <el-button @click="addNewTeamStudent = false">取 消</el-button>
        <el-button type="primary" @click="teamStudentAddNew()" style="margin-right: 220px">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹出的添加搜索组员的对话框 -->
    <el-dialog :title="handle" :visible.sync="addNewSearchTeamStudent" style="width: 1250px">
      <div>
        <el-select
            v-model="student"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="搜索查询姓名"
            :remote-method="searchByNickname"
            :loading="loading">
          <el-option
              v-for="item in students"
              :key="item.id"
              :label="item.nickname"
              :value="item">
            <span style="float: left">{{ item.nickname }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.className }}</span>
          </el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer" style="margin: auto auto">
        <el-button @click="addNewSearchTeamStudent = false">取 消</el-button>
        <el-button type="primary" @click="teamStudentAddNew()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      loading: false,
      student: '',
      students: '',
      data: '',
      addTeamStudents: [],
      url: '',
      supervisor: {},
      supervisors: [],
      handle: '',
      handleTeam: false,
      addNewTeamStudent: false,
      addNewSearchTeamStudent: false,
      teamStandardForm: {
        id: '',
        teamName: '',
        supervisorId: '',
        supervisorName: ''
      },
      teamForm: {
        id: '',
        teamName: '',
        supervisorId: '',
        supervisorName: ''
      },
      lightClass: false,
      lightTeam: false,
      highlightClass: {},
      highlightTeam: {},
      teamUpdateStandardFrom: {
        id: '',
        teamName: '',
        supervisorId: '',
        supervisorName: ''
      },
      teamUpdateFrom: {
        id: '',
        teamName: '',
        supervisorId: '',
        supervisorName: ''
      },
      classData: [],
      teamData: [],
      teamStudentData: [],
      unTeamStudentData: [],
    }
  },
  methods: {
    loadMyClassList(){
      let url = 'http://localhost:9878/classes/my-class-list';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.classData = responseBody.data;
          this.highlightClass = null;
        }
      });
    },
    loadClassList(){
      let url = 'http://localhost:9878/classes';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.classData = responseBody.data;
          this.highlightClass = null;
        }
      });
    },
    openAddNewTeam(){
      if (!this.lightClass) {
        this.$message.error('请先选择需要添加小组的班级！');
      } else {
        this.handleTeam = true;
        this.teamForm=this.teamStandardForm;
        this.loadStudentList()
        this.url = 'http://localhost:9878/teams/'+this.highlightClass.id+'/add-new'
      }
    },
    openUpdateTeam(){
      console.log(this.highlightTeam)
      if (!this.lightTeam) {
        this.$message.error('请选择需要修改的分组！');
      } else {
        this.loadStudentList()
        let url = 'http://localhost:9878/teams/' + this.highlightTeam.id + '/get';
        console.log('url = ' + url);
        this.axios.get(url).then((response) => {
          let responseBody = response.data;
          if (responseBody.state != 2000) {
            this.$message.error('获取小组信息失败，稍后再试！');
          }
          if (responseBody.state == 2000) {
            this.teamForm=responseBody.data;
            console.log(this.teamForm)
            this.url = 'http://localhost:9878/teams/update'
          }
        });
        this.handleTeam=true;
      }
    },
    loadStudentList() {
      let classId = this.highlightClass.id;
      let url = 'http://localhost:9878/users/'+classId+'/list-by-class';
      console.log(classId);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.supervisors = responseBody.data;
        }
      });
    },
    teamHandle(){
      this.teamForm.supervisorId = this.supervisor.id;
      this.teamForm.supervisorName = this.supervisor.nickname;
      console.log("小组信息为: ")
      console.log(this.teamForm)
      let formData = this.qs.stringify(this.teamForm, {arrayFormat: 'repeat'});
      console.log('formData = ' + formData);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(this.url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 2000) {
          this.$message.error(responseBody.message)
        } else {
          this.$message({
            message: '添加小组成功！',
            type: 'success'
          });
          this.teamForm = {
            id: '',
            teamName: '',
            supervisorId: '',
            supervisorName: ''
          };
          this.handleTeam = false;
          this.loadTeamList(this.highlightClass);
          this.lightTeam = false;
          this.url = '';
        }
      });
    },
    loadTeamList(classes){
      this.highlightClass = classes;
      this.lightClass = true;
      this.teamStudentData=[];
      let url = 'http://localhost:9878/teams/'+classes.id+'/list-by-class';
      console.log(classes);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.teamData = responseBody.data;
          this.highlightClass = classes;
        }
      });},
    loadStudentListByTeam(team){
      this.highlightTeam = team;
      this.lightTeam = true;
      let url = 'http://localhost:9878/users/'+team.id+'/list-by-team';
      console.log(team);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.teamStudentData = responseBody.data;
        }
      });
    },
    openAddNewTeamStudent(){
      if (!this.lightTeam) {
        this.$message.error('请先选择需要添加成员的分组！');
      } else {
        this.addNewTeamStudent = true;
        let url = 'http://localhost:9878/users/'+this.highlightClass.id+'/list-by-class-No-team';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          if ( responseBody.state != 2000){
            this.$message.error('未分组学员加载失败，请稍后再试！！')
          } else {
            this.unTeamStudentData = responseBody.data;
          }
        });
      }
    },
    teamStudentAddNew(){
      let formData = this.qs.stringify(this.addTeamStudents, {arrayFormat: 'repeat'});
      console.log('formData = ' + formData);
      let url = 'http://localhost:9878/userTeams/'+this.highlightTeam.id+'/add-new';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 2000) {
          this.$message.error(responseBody.message)
        } else {
          this.$message({
            message: '小组成员添加成功！',
            type: 'success'
          });
        }
      });
      this.loadStudentListByTeam(this.highlightTeam);
    },
    openAddNewSearchTeamStudent(){
      if (!this.lightTeam) {
        this.$message.error('请先选择需要添加成员的分组！');
      } else {
        this.addNewSearchTeamStudent = true;
      }
    },
    searchByNickname(nickname){
      if (nickname == null ) {
        this.$message.error('请输入搜索内容！');
      } else {
        this.loading = true;
      }
      let url = 'http://localhost:9878/users/'+nickname+'/list-by-search';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('未分组学员加载失败，请稍后再试！！')
        } else {
          this.students = responseBody.data;
        }
      });
      this.loading = false;
    }
  },
  mounted() {
    this.loadClassList();
  }
}
</script>

<style scoped>
.box-card {
  width: 480px;
  height: 750px;
}
</style>